<template>
  <div class="login_container">
    <div class="login_wrapper">
      <div class="login_one_container">
        <div class="login_title_container">登录账号</div>
        <div class="login_titile_tow">虾米 - 严选商城欢迎您</div>
      </div>
      <div class="login_tow_container">
        <input type="text" placeholder="手机号码" v-model="mobile"/>
        <input type="text" placeholder="密码" v-model="pwd"/>
      </div>
      <div class="login_therr_container" >
        <button @click="change">登录</button>
      </div>
      <div class="login_four_container">
        <a href="">忘记密码</a>
      </div>
      <div class="login_five_container">
        <a >还没有注册?</a>
        <button @click="zhuce">立即注册</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
data() {
  return {
    mobile:"",
    pwd:""
  }
},
methods: {
  change(){
    var mobile=this.mobile;
    var pwd=this.pwd
    this.$API.sigin(mobile,pwd).then((res)=>{
        console.log(res);
        localStorage.setItem("token",res.data.data.token)
        this.$router.push('/')
    }).catch((err)=>{
      console.log(err);
    })
  },
  zhuce(){
    this.$router.push("/register")
  }
},

};
</script>

<style scoped>
.login_container {
  width: 100vw;
  height: 100vh;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.login_wrapper {
  width: 80%;
  height: 80%;
  border: 1px solid #f5f5f5;
}
.login_one_container {

  width: 100%;
  /* height: 4rem; */

  /* background-color: cadetblue; */
}
.login_one_container div {
  width: 100%;
  /* height: 50%; */
  padding: 0.2rem 0;
  text-align: center;
}
.login_title_container {
  font-size: 0.6rem;
  font-weight: normal;
}
.login_titile_tow {
  font-size: 0.4rem;
  color: #ccc;
}
.login_tow_container {
  width: 90%;
  height: 3rem;
  text-align: center;
  /* display: inline-flex;
  flex-wrap: wrap; */
  /* align-items: center; */
  /* justify-content: center; */
  /* background-color: aquamarine; */
}
.login_tow_container input {
  width: 100%;
  height: 1rem;
  border: 0px;
  margin-left: 0.2rem;
  margin-top: 0.1rem;
  background-color: rgb(245, 245, 245);
  color: #ccc;
  font-size: 0.3rem;
  border-radius: 7px;
}
.login_therr_container {
  margin-top: 0.2rem;
  width: 80%;
  height: 1rem;
  margin-left: 0.4rem;
  display: inline-flex;

  justify-content: center;
  align-items: center;
}
.login_therr_container button {
  height: 100%;
  /* width: 8.9rem; */
  width: 100%;
  background: linear-gradient(135deg, #e570e7 0%, #79f1fc 100%);
  display: block;
  outline: none;
  border: 0px;
  border-radius: 10px;
  color: #fff;
  font-size: 0.3rem;
}
.login_four_container {
  width: 100%;
  height: 1rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 0.3rem;
}
.login_four_container a {
  color: #ccc;
}
.login_five_container {
  width: 100%;
  height: 1rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 0.6rem;
}
.login_five_container a {
  color: #549ff9;
}
.login_five_container button{
  border: none;
  outline: none;
  background-color: #fff;
 color: #549ff9;
 font-size: 0.3rem;
}
</style>